<!-- Dom模板 -->
<template>
  <div class="vipBox">
    <!-- Dom内容 -->
    <div class="title"><h4>会员管理</h4></div>
    <div class="content">
      <div class="vipTop">
        <div class="vipLeft">
          <el-select v-model="value" placeholder="全部会员">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            placeholder="会员号/手机号/会员"
            v-model="input"
            clearable
            class="box"
          >
          </el-input>
          <el-button round>查询</el-button>
        </div>
        <div class="vipRight">
          <el-button round @click="addbtn">添加</el-button>
          <el-button round>导出</el-button>
        </div>
      </div>
      <div class="vipMain">
        <el-table
          :data="vipData.slice((currentPage3 - 1) * 5, currentPage3 * 5)"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="serialNumber"
            label="序号"
            width="100"
            height="20"
          >
          </el-table-column>
          <el-table-column prop="mid" label="会员号" width="100">
          </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="MemType" label="会员类别"> </el-table-column>
          <el-table-column prop="discount" label="折扣"> </el-table-column>
          <el-table-column prop="Monetary" label="消费金额"> </el-table-column>
          <el-table-column prop="integrate" label="积分"> </el-table-column>
          <el-table-column prop="storedMoney" label="储值余额">
          </el-table-column>
          <el-table-column prop="tel" label="手机号码"> </el-table-column>
          <el-table-column prop="zao" label="操作">
            <template slot-scope="scope">
              <span @click="fixbtn(scope.row)">修改</span>
              &nbsp;&nbsp;<span @click="delbtn(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="vipBottom">
        <sort
          :list="vipData"
          :ye="currentPage3"
          :tiao="5"
          @paging="paging"
        ></sort>
      </div>
      <ADD
        v-if="addFalse"
        :flag="addFalse"
        @addClose="addClose"
        @noaddClose="noaddClose"
      ></ADD>
      <FIX
        v-if="fixFalse"
        :flag="fixFalse"
        :onedata="onedata"
        @fixClose="fixClose"
        @nofixClose="nofixClose"
      ></FIX>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import * as apis from "../../api/vip";
import sort from "../../components/paging.vue";
import ADD from "../../components/vip/add.vue";
import FIX from "../../components/vip/fixed.vue";
export default {
  name: "",
  components: { sort, ADD, FIX },
  data() {
    return {
      msg: "测试",
      vipData: [], //总数据
      sliceData: [], //截取的数据
      onedata: {}, //单条数据
      currentPage3: 1, //当前页
      input: "",
      options: [
        {
          value: "选项0",
          label: "全部会员",
        },
        {
          value: "选项1",
          label: "金卡",
        },
        {
          value: "选项2",
          label: "银卡",
        },
        {
          value: "选项3",
          label: "铜卡",
        },
      ],
      value: "",
      addFalse: false,
      fixFalse: false,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.changeData();
  },
  // Vue方法定义
  methods: {
    //获取截取的数据
    paging(arr) {
      this.currentPage3 = arr;
    },
    //添加
    addbtn() {
      this.addFalse = true;
    },
    addClose(flag) {
      setTimeout(() => {
        this.changeData();
      }, 500);
      this.addFalse = flag;
    },
    noaddClose(flag) {
      this.addFalse = flag;
    },
    //删除
    delbtn(obj) {
      this.$confirm("此操作将永久添加该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          apis.vipdel({ mid: obj.mid }).then((res) => {
            console.log(res.data);
          });
          setTimeout(() => {
            this.changeData();
          }, 500);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改
    fixbtn(obj) {
      this.onedata = obj;
      this.fixFalse = true;
    },
    fixClose(flag) {
      console.log(flag);
      setTimeout(() => {
        this.changeData();
      }, 500);
      this.fixFalse = flag;
    },
    nofixClose(flag) {
      console.log(flag);
      this.fixFalse = flag;
    },
    //刷新页面
    changeData() {
      apis.vip().then((res) => {
        this.vipData = res.data;
      });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
.vipBox {
  width: 100%;
  height: 100%;
  padding-left: 20px;
}
.title {
  width: 100%;
  line-height: 40px;
}
.content {
  width: 96%;
  border: 1px solid #ccc;
  background: #fff;
}
.vipTop {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.vipTop .vipLeft {
  display: flex;
  flex-direction: row;
}

.vipTop .vipLeft .el-select {
  margin-left: 10px;
}

.el-input {
  width: 40%;
  margin-left: 10px;
}
.el-button {
  margin-left: 10px;
}

.vipMain .el-table tr {
  background-color: #e2e2e2 !important;
}
</style>
<style scoped>
.el-button.is-round {
  border-radius: 20px;
  padding: 8px 23px;
}
</style>
<style>
.el-button.is-round {
  border-radius: 20px;
  padding: 8px 23px;
}
.vipBox .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 30px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.vipBox .el-input__suffix .el-input__icon {
  height: 100%;
  width: 25px;
  text-align: center;
  transition: all 0.3s;
  line-height: 32px;
}
</style>
